<template>
	<view class="flex-col page">
	<u-navbar title="朋友圈记录" title-color="#333" :background="background"></u-navbar>
	  <view class="flex-col list mt-16-5">
	    <view class="flex-col list-item mt-15" v-for="(item,index) in list" :key="index">
	      <view class="flex-row justify-between items-center self-stretch group_2">
	        <text class="font text_2">{{item.time}}</text>
	        <view class="flex-row items-center group_3">
	          <text class="font" :class="item.is_new_exce == 0 ? 'text_33' : item.is_new_exce == 1 ? 'text_3': 'text_333'">{{item.is_new_exce == 0
	                ? "待执行"
	                : item.is_new_exce == 1
	                ? "已执行"
	                : "已取消"}}</text>
	          <image
	           v-if="item.is_new_exce == 1"
	            class="ml-2 shrink-0 image_4"
	            src="/static/image/haoduogeni/friend-circle-success.png"
	          />
	          <image
	          v-else
	            class="ml-2 shrink-0 image_4"
	            src="/static/image/haoduogeni/friend-circle-fail.png"
	          />
	        </view>
	      </view>
	      <text class="self-start font_2 text_4">{{item.titleNew}}</text>
	      <view :class="(item.imgs.length>=0 && item.imgs.length<4) ? 'grid1' : (item.imgs.length>3 && item.imgs.length<7) ? 'grid2' : 'grid3'">
	        <image
	            @click="previewImage(item.imgs,indexs)"
	            class="grid-item"
	            :src="items.url"
	            v-for="(items,indexs) in item.imgs" :key="indexs"
	            mode="aspectFill"
	          />
	      </view>
	    </view>
	  </view>
	</view>
</template>

<script>
	import {
		WechatMoments
	} from '../../haoduogeni/common/api/user';
	export default {
		data() {
			return {
				background: {
					backgroundColor: 'rgba(0,0,0,0)'
				},
				list: [],
				    taskId: '',
				    page: 1,
				    row: 10,
				    last_page: 1
			}
		},
		onLoad(options) {
		    this.id = options.id;
		    this.getList()
		  },
		  onReachBottom() {
		      console.log('到底了')
		      if(this.page < this.last_page){
		        this.page++;
		        this.getList()
		      }else {
		        uni.showToast({
		          title: '已加载全部',
		          icon: 'none'
		        })
		      }
		    },
		methods: {
			previewImage(imgs,index) {
			    var arr = [];
			    imgs.map(item=>{arr.push(item.url)})
			    uni.previewImage({
			      current: index,
			      urls: arr
			    });
			  },
			  replaceHuanhang(originalUrl) {
			    var hasBar = originalUrl.includes("|")
			    var secureUrl = hasBar ? originalUrl.replace(/\|/g, '\n') : originalUrl;
			    return secureUrl;
			  },
			  getList(){
			    var _this = this;
			    WechatMoments({
			      uid: this.id,
			      row: this.row,
			      page: this.page
			    }).then(res => {
			      //成功时回调函数
			      console.log(res, 'getWxUser')
			      if (res.errno == 0) {
			        // var arr = res.data.data.map((item) => {
			        //   return {
			        //     ...item,
			        //     titleNew: this.replaceHuanhang(item.title)
			        //   }
			        // })
			        var data = res.data.data;
			        var arr = [...this.list,...data]
			        var arr1 = arr.map((item) => {
			          return {
			            ...item,
			            titleNew: this.replaceHuanhang(item.title)
			          }
			        })
			        this.list = arr1;
			        this.last_page = res.data.last_page;
			        
			        // this.setData({
			        //   list: arr
			        // })
			      } else {
			        uni.showToast({
			          title: res.msg,
			          icon: 'none'
			        })
			      }
			    }).catch(err => {
			      //失败时回调函数
			      console.log(err)
			    })
			    
			  },
		}
	}
</script>

<style lang="less" scoped>
	@import url("../common/css/common.css");
	.mt-19 {
	  margin-top: 38rpx;
	}
	.mt-16-5 {
	  margin-top: 33rpx;
	}
	.ml-12-5 {
	  margin-left: 25rpx;
	}
	.mt-15 {
	  margin-top: 30rpx;
	}
	page {
	  padding-bottom: 119rpx;
	  background-color: #f3f4f6;
	  width: 100%;
	  /* overflow-y: auto;
	  overflow-x: hidden; */
	  height: 100%;
	}
	.section {
	  padding: 30rpx 15rpx 22rpx 30rpx;
	  background-color: #ffffff;
	  border-bottom: solid 1rpx #f3f4f6;
	}
	.image {
	  margin-left: 38rpx;
	  margin-right: 13rpx;
	  width: 655rpx;
	  height: 24rpx;
	}
	.group {
	  padding: 15rpx 0;
	}
	.image_3 {
	  width: 20rpx;
	  height: 35rpx;
	}
	.pos_2 {
	  position: absolute;
	  left: 0;
	  top: 50%;
	  transform: translateY(-50%);
	}
	.text {
	  color: #000000;
	  font-size: 36rpx;
	  font-family: PingFang SC;
	  font-weight: 500;
	  line-height: 34rpx;
	}
	.section_2 {
	  padding: 11rpx 25rpx 14rpx;
	  background-color: #ffffffba;
	  border-radius: 32rpx;
	  border-left: solid 1rpx #eaeaea;
	  border-right: solid 1rpx #eaeaea;
	  border-top: solid 1rpx #eaeaea;
	  border-bottom: solid 1rpx #eaeaea;
	}
	.pos {
	  position: absolute;
	  right: 0;
	  top: 50%;
	  transform: translateY(-50%);
	}
	.image_2 {
	  width: 61rpx;
	  height: 37rpx;
	}
	.list {
	  padding: 0 30rpx;
	}
	.list-item {
	  padding-bottom: 32rpx;
	  filter: drop-shadow(0rpx 7rpx 6.5rpx #dddddd24);
	  border-radius: 16rpx;
	  /* background-image: url('https://ide.code.fun/api/image?token=6896b55bd26a7d0011a61bac&name=6fff165cc5078b706a63d5459bef001e.png');
	  background-size: 100% 100%;
	  background-repeat: no-repeat; */
	  background-color: #fff;
	}
	.list-item:first-child {
	  margin-top: 0;
	}
	.group_2 {
	  padding: 29rpx 24rpx 23rpx;
	  border-bottom: solid 1rpx #f3f4f6;
	}
	.font {
	  font-size: 26rpx;
	  font-family: PingFang SC;
	  line-height: 25rpx;
	  color: #ef4444;
	}
	.text_2 {
	  color: #6b7280;
	}
	.group_3 {
	  margin-right: 6rpx;
	}
	.text_3 {
	  color: #4caf50;
	}
	.text_33 {
	  color: #dd524b;
	}
	.text_333 {
	  color: #6b7280;
	}
	.image_4 {
	  width: 34rpx;
	  height: 34rpx;
	}
	.font_2 {
	  font-size: 30rpx;
	  font-family: PingFang SC;
	  line-height: 31rpx;
	  font-weight: 500;
	  color: #1f2937;
	  word-break: break-all;
	}
	.text_4 {
	  margin-left: 25rpx;
	  margin-top: 32rpx;
	}
	/* .grid {
	  margin: 28rpx 27rpx 0 24rpx;
	  display: grid;
	  grid-template-rows: repeat(2, minmax(0, 1fr));
	  grid-template-columns: repeat(3, minmax(0, 1fr));
	  row-gap: 16rpx;
	  column-gap: 16rpx;
	} */
	.grid1 {
	  margin: 28rpx 27rpx 0 24rpx;
	  display: grid;
	  grid-template-rows: repeat(1, minmax(0, 1fr));
	  grid-template-columns: repeat(3, minmax(0, 1fr));
	  row-gap: 16rpx;
	  column-gap: 16rpx;
	}
	.grid2 {
	  margin: 28rpx 27rpx 0 24rpx;
	  display: grid;
	  grid-template-rows: repeat(2, minmax(0, 1fr));
	  grid-template-columns: repeat(3, minmax(0, 1fr));
	  row-gap: 16rpx;
	  column-gap: 16rpx;
	}
	.grid3 {
	  margin: 28rpx 27rpx 0 24rpx;
	  display: grid;
	  grid-template-rows: repeat(3, minmax(0, 1fr));
	  grid-template-columns: repeat(3, minmax(0, 1fr));
	  row-gap: 16rpx;
	  column-gap: 16rpx;
	}
	.grid-item {
	  border-radius: 16rpx;
	  width: 204rpx;
	  height: 204rpx;
	}

</style>
